@charset "UTF-8";

/*****************
 * GtkSpinButton *
 *****************/
spinbutton {
    &:not(.vertical) {
        // in this horizontal configuration, the whole spinbutton
        // behaves as the entry, so we extend the entry styling
        // and nuke the style on the internal entry
        @extend %entry;

        padding: 0;

        entry {
            min-width: 28px;
            margin: 0;
            background: none;
            background-color: transparent;
            border: none;
            border-radius: 0;
            box-shadow: none;

            &:backdrop:disabled {
                background-color: transparent;
            }
        }

        button {
            min-height: 16px;
            margin: 0;
            padding-bottom: 0;
            padding-top: 0;
            background-color: gtk("@theme_widget_background_normal");
            border-style: none none none solid;
            border-radius: 0;
            box-shadow: none;

            &:hover {
                background-color: gtk("@theme_widget_background_hover");
            }

            &:active {
                background-color: gtk("@theme_widget_background_active");
                box-shadow: none;
            }

            &:disabled {
                background-color: gtk("@theme_widget_background_insensitive");
            }

            &:backdrop {
                background-color: gtk("@theme_widget_background_backdrop");

                &:disabled {
                    background-color: gtk("@theme_widget_background_backdrop_insensitive");
                }
            }

            &:dir(ltr):last-child {
                border-radius: 0 $RadiusLittle $RadiusLittle 0;
            }

            &:dir(rtl):first-child {
                border-radius: $RadiusLittle 0 0 $RadiusLittle;
            }
        }
    }

    // Vertical
    &.vertical {
        // in the vertical configuration, we treat the spinbutton
        // as a box, and tweak the style of the entry in the middle
        // so that it's linked

        // FIXME: this should not be set at all, but otherwise it gets the wrong
        // color
        &:disabled {
            background-color: gtk("@theme_widget_background_insensitive");
        }

        &:backdrop:disabled {
            color: gtk("@theme_widget_background_backdrop_insensitive");
        }

        &:drop(active) {
            border-color: transparent;
            box-shadow: none;
        }

        entry {
            min-height: 26px;
            min-width: 26px;
            padding: 0;
            border-radius: 0;
        }

        button {
            min-height: 26px;
            min-width: 26px;
            padding: 0;
            box-shadow: none;
            background-image: none;
            background-color: gtk("@theme_widget_background_normal");

            &:hover {
                background-color: gtk("@theme_widget_background_hover");
            }

            &:active {
                background-color: gtk("@theme_widget_background_active");
            }

            &:disabled {
                background-color: gtk("@theme_widget_background_insensitive");
            }

            &:backdrop {
                background-color: gtk("@theme_widget_background_backdrop");

                &:disabled {
                    background-color: gtk("@theme_widget_background_backdrop_insensitive");
                }
            }

            &.up {
                border-radius: $RadiusLittle $RadiusLittle 0 0;
                border-style: solid solid none solid;
            }

            &.down {
                border-radius: 0 0 $RadiusLittle $RadiusLittle;
                border-style: none solid solid solid;
            }
        }
    }

    // Misc
    treeview &:not(.vertical) {
        min-height: 0;
        border-style: none;
        border-radius: 0;

        entry {
            min-height: 0;
            padding: 1px 2px;
        }
    }
}